<template>
    <div class="ChartList">
        <div class="left">
            <div class="info">
                <div class="num">{{ current }}</div>
                <div>{{ needTitle ? currentTitle : title }}</div>
            </div>
        </div>
        <div class="list">
            <div @click="handlerClick(index)" :class="index == activeIndex ? 'item active' : 'item'" v-for="(item, index) in list" :key="index">
                <span class="circle" :style="{ background: COLOR[index % 6] }"></span>
                <div class="item-name">{{ item.name }}</div>
                <div :class="item.percentage == null ? 'right right-null' : 'right'">
                    <div class="item-num">{{ item.num }}{{ item.util ? item.util : '个' }}</div>
                    <div class="item-bfb" v-if="showP">{{ item.percentage }}%</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface listType {
    name: string
    num: number
    util: string
    percentage: number
}

const COLOR = ['#fcb900', '#f48144', '#7b9dd3', '#20d7ff', '#6573f0', '#e7deeb']
const props: any = defineProps({
    needTitle: {
        type: Boolean,
        default: true
    },
    title: {
        type: String,
        default: '计划完成度'
    },
    showP: {
        type: Boolean,
        default: true
    },
    list: {
        type: Array<listType>,
        default: () => [
            {
                name: '供配电系统',
                num: 33,
                util: '个',
                percentage: 33
            },
            {
                name: '消防系统',
                num: 35,
                util: '个',
                percentage: 35
            },
            {
                name: '给排水系统',
                num: 22,
                util: '个',
                percentage: 22
            },
            {
                name: '空调系统',
                num: 10,
                util: '个',
                percentage: 10
            },
            {
                name: '电梯系统',
                num: 35,
                util: '个',
                percentage: 35
            },
            {
                name: '监控系统',
                num: 22,
                util: '个',
                percentage: 22
            }
        ]
    }
})
const activeIndex = ref(0)
const current = ref(props.list[0].num + props.list[0].util)
const currentTitle = ref(props.list[0].name)

const handlerClick = (index: number) => {
    activeIndex.value = index

    current.value = props.list[index].num + props.list[index].util
    if (props.title == '') {
        currentTitle.value = props.list[index].name
    }
}

watch(
    () => props,
    () => {
        if (current.value == null) {
            current.value = props.list[0].num + props.list[0].util
        }
    },
    {
        immediate: true,
        deep: true
    }
)
</script>

<style scoped lang="scss">
.ChartList {
    display: flex;
    color: #ffffff;
    .left {
        position: relative;
        width: 170px;
        height: 140px;
        background: url('@/assets/images/home/底座样式11.png') no-repeat;
        background-size: 100% 100%;
        .info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 10px;
            font-size: 12px;
            .num {
                text-align: center;
                width: 200px;
                margin-bottom: 10px;
                color: #009bf1;
                font-family: PangMenZhengDao;
                font-weight: 400;
                font-size: 30px;
            }
        }
    }
    .list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 230px;
        height: 157px;
        overflow-y: auto;
        overflow-x: hidden;
        .item {
            cursor: pointer;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 2px 0 2px 5px;
            .circle {
                width: 10px;
                height: 10px;
                margin-right: 5px;
                border-radius: 50%;
                background: #ecaf05;
            }
            .item-name {
                flex: 1;
                opacity: 0.8;
                font-size: 12px;
            }
            .right {
                width: 45%;
                display: flex;
                justify-content: space-between;
                .item-num {
                    color: #009bf1;
                    font-family: PangMenZhengDao;
                    font-weight: 400;
                    font-size: 18px;
                    letter-spacing: 1px;
                }
                .item-bfb {
                    font-family: PangMenZhengDao;
                    font-weight: 400;
                    font-size: 16px;
                }
            }
            .right-null {
                justify-content: flex-end;
            }
        }
        .item:hover {
            background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent);
        }
        .active {
            background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent);
        }
    }
}
</style>
